<template lang="html">
  <div>
    <v-pageTitle vtitle="预约门诊"></v-pageTitle>
    <div class="clear"></div>
    <el-row :gutter="20">

        <el-col :xs="12" :sm="12" :md="12" :lg="8">
            <el-card class="box-card">
               <el-row :gutter="6">
                  <el-col :xs="24" :sm="8" :md="8" :lg="8">
                      <el-progress type="circle" :percentage="67" :width="80"></el-progress>
                  </el-col>
                  <el-col :xs="24" :sm="11" :md="12" :lg="12">
                      <div class="cart-string">
                      <span>预约订单</span>
                      <span><h2>57,82</h2></span>
                      </div>
                  </el-col>
                  <el-col :xs="24" :sm="5" :md="4" :lg="4">
                      <div>
                          <i class="material-icons">person_outline</i>
                      </div>
                  </el-col>
               </el-row>
            </el-card>
        </el-col>

        <el-col :xs="12" :sm="12" :md="12" :lg="8">
            <el-card class="box-card">
               <el-row :gutter="6">
                <el-col :xs="24" :sm="8" :md="8" :lg="8">
                    <div> <el-progress type="circle" :percentage="81" :width="80"></el-progress></div>
                </el-col>
                <el-col :xs="24" :sm="11" :md="12" :lg="12">
                    <div class="cart-string">
                    <span>今日实到病人</span>
                    <span><h2>1,68</h2></span>
                    </div>
                </el-col>
                <el-col :xs="24" :sm="5" :md="4" :lg="4">
                    <div>
                        <i class="material-icons">attach_money</i>
                    </div>
                </el-col>
               </el-row>
            </el-card>
        </el-col>
        <el-col :xs="12" :sm="12" :md="12" :lg="8">
            <el-card class="box-card">
               <el-row :gutter="6">
                <el-col :xs="24" :sm="8" :md="8" :lg="8">
                    <div> <el-progress type="circle" :percentage="88" :width="80"></el-progress></div>
                </el-col>
                <el-col :xs="24" :sm="11" :md="12" :lg="12">
                    <div class="cart-string">
                    <span>今日未到病人</span>
                    <span><h2>100</h2></span>
                    </div>
                </el-col>
                <el-col :xs="24" :sm="5" :md="4" :lg="4">
                    <div>
                        <i class="material-icons">replay</i>
                    </div>
                </el-col>
               </el-row>
            </el-card>
        </el-col>
    </el-row>
    <el-row>
      <el-col :xs="24" :sm="24" :md="24" :lg="24">
        <el-card class="box-list">
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="姓名">
              <el-input v-model="formInline.user" placeholder="姓名"></el-input>
            </el-form-item>
            <el-form-item label="门诊科室">
              <el-input v-model="formInline.Office" placeholder="外科"></el-input>
            </el-form-item>
            <el-form-item label="状态：">
              <el-checkbox-group v-model="checkList">
                <el-checkbox label="已接待"></el-checkbox>
                <el-checkbox label="等待"></el-checkbox>
              </el-checkbox-group>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="success" plain @click="onSubmit">添加病例</el-button>
            </el-form-item>
          </el-form>
          <el-table :data="tableData" style="width: auto"  border stripe>
             <el-table-column prop="id"  label="编号"  width="80"></el-table-column>
             <el-table-column prop="userName" label="姓名" width="100"></el-table-column>
             <el-table-column prop="value" label="就诊类型" width="100"> </el-table-column>
             <el-table-column prop="gatepost"  label="门诊科室"  width="180"></el-table-column>
             <el-table-column prop="doctor" label="预约医生" width="180"></el-table-column>
             <el-table-column prop="time" label="预约时间" width="180"> </el-table-column>
             <el-table-column prop="status"  label="就诊状态"  width="180"></el-table-column>
             <el-table-column
              label="操作"
              width="120">
              <template slot-scope="scope">
                <el-button @click="handleClick(scope.row)" type="text" size="small">详情</el-button>
                <el-button type="text" size="small">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import vPageTitle from '../common/pageTitle.vue';
export default {
  data(){
    return{
      checkList:['已接待','等待'],
      formInline: {
          user: '',
          region: ''
        },
      tableData: [{
        id:'001',
        userName: '王大锤',
        value: '初诊',
        gatepost:'肩周炎疾病科',
        doctor:'华佗（医生）',
        time:'2018.3.02 10:00',
        status:'已接待'
      }, {
        id:'002',
        userName: '李啊六',
        value: '初诊',
        gatepost:'不孕不育',
        doctor:'扁鹊（医生）',
        time:'2018.3.02 10:00',
        status:'已接待'

      }, {
        id:'003',
        userName: '狗不理',
        value: '初诊',
        gatepost:'肩周炎疾病科',
        doctor:'张仲景（专家）',
        time:'2018.3.02 10:00',
        status:'预约未到'
      }, {
        id:'004',
        userName: '王大锤',
        value: '初诊',
        gatepost:'偏头痛',
        doctor:'马大礼（医生）',
        time:'2018.3.02 10:00',
        status:'已接待'

      }, {
        id:'001',
        userName: '王大锤',
        value: '初诊',
        gatepost:'肩周炎疾病科',
        doctor:'华盛顿（医生）',
        time:'2018.3.02 10:00',
        status:'预约未到'

      }, {
        id:'005',
        userName: '王大锤',
        value: '初诊',
        gatepost:'叫化脓',
        doctor:'华佗（医生）',
        time:'2018.3.02 10:00',
        status:'等待'

      }, {
        id:'006',
        userName: '李大美',
        value: '初诊',
        gatepost:'食物中毒口吐白沫',
        doctor:'华佗（医生）',
        time:'2018.3.02 10:00',
        status:'等待'

      }, {
        id:'007',
        userName: '马大叔',
        value: '初诊',
        gatepost:'肩周炎疾病科',
        doctor:'华佗（医生）',
        time:'2018.3.02 10:00',
        status:'等待'

      }]
    }
  },
  components:{
    vPageTitle
  }
}
</script>

<style lang="less" scoped>
.el-col{
    margin-bottom:16px;
    text-align:center;
}
.material-icons{
    font-size:80px;
    color:#ddd;
}
.box-card{
    height:110px;
}
.cart-string{
    height:100px;
    padding-top:10px;
    font-size:1.1rem;

}
</style>
